<template>
	<div>
		<el-dialog :visible.sync="visible2" width="40%" :close-on-click-modal="false" top="4%" title="任务详情"
			append-to-body>
			<div>
				<div style="padding: 10px;background: #ECF4FE;border-radius: 10px;">
					<div class="displayFlexBet" style="margin-bottom: 10px;">
						<div class="displayFlex">
							<!-- <span style="margin-right: 10px;font-size: 15px;font-weight: bold;">【{{detail.scheduleTypeStr}}】</span> -->
							<span
								style="margin-right: 10px;font-size: 16px;font-weight: bold;">{{detail.mainTitle || detail.scheduleTypeStr}}</span>

							<img src="../../assets/sIcon9.png" v-if="detail.status == 'WAIT_COMPLETE'"
								style="width: 20px;height: 20px;" />
							<img src="../../assets/sIcon6.png" v-if="detail.status == 'HAVE_COMPLETE'"
								style="width: 20px;height: 20px;" />
							<!-- <span>{{detail.executeByName}}</span> -->
						</div>
						<!-- <div>{{detail.createTime}}</div> -->
					</div>
					<div class="displayFlexBet" style="margin-bottom: 10px;">
						<div style="font-size: 15px;font-weight: bold;">{{detail.publishByName}}：{{detail.remark}}</div>
					</div>
					<div style="margin-bottom: 10px;">内容：{{detail.content}}</div>
					<div style="margin-bottom: 10px;">类别：{{detail.scheduleTypeStr}}</div>
					<div style="margin-bottom: 10px;" v-if="detail.executeByName">执行人：{{detail.executeByName}}</div>
					<div style="margin-bottom: 10px;">开始时间：{{detail.createTime}}</div>
					<div style="margin-bottom: 10px;" v-if="detail.planCompleteTime">
						计划完成时间：{{detail.planCompleteTime}}
					</div>
				</div>


				<div @click="gotoDet(detail)"
					style="padding: 10px;background: #ECF4FE;border-radius: 10px;margin-top: 10px;cursor: pointer;">
					<div style="margin-right: 10px;font-size: 16px;font-weight: bold;margin-bottom: 10px;">任务执行</div>
					<div class="displayFlex"
						style="background: #DBEAFD;border-radius: 12px;padding: 10px;color: #333;width: 150px;justify-content: center;">
						<span style="margin-right: 10px;">{{detail.content}}</span>
						<img src="@/assets/sIcon50.png" style="width: 20px;height: 20px;" />
					</div>
				</div>

				<div style="padding: 10px;background: #ECF4FE;border-radius: 10px;margin-top: 10px;"
					v-if="detail.situationDesc">
					<div style="margin-right: 10px;font-size: 16px;font-weight: bold;margin-bottom: 10px;">任务执行结果</div>
					<div class="u-m-b-10">
						<span>备注：</span>
						<span class="u-type-info">{{detail.situationDesc}}</span>
					</div>
					<div class="u-m-b-10" v-if="detail.actualCompleteTimeStr">
						<span>完成时间：</span>
						<span class="u-type-info">{{detail.actualCompleteTimeStr}}</span>
					</div>
				</div>

				<div v-if="approveDet && approveDet.length > 0"
					style="padding: 10px;background: #ECF4FE;border-radius: 10px;margin-top: 10px;">
					<div style="margin-right: 10px;font-size: 16px;font-weight: bold;margin-bottom: 10px;">审核</div>
					<div class="displayFlex">
						<div v-for="(item,index) in approveDet" :key="index">
							<div v-if="index != approveDet.length - 1" class="displayFlex">
								<div class="displayFlex">
									<img src="@/assets/sIcon36.png" style="width: 20px;height: 20px;"></img>
									<span class="u-m-l-20">{{item.userName}}</span>
								</div>

								<div>
									<img src="@/assets/sIcon37.png"
										style="width: 20px;height: 10px;margin: 0 10px;"></img>
								</div>
							</div>

							<div v-else class="displayFlex">
								<img src="@/assets/sIcon38.png" style="width: 20px;height: 20px;"></img>
								<span class="u-m-l-20">{{item.userName}}</span>
								<span class="u-font-10 u-type-info">({{item.statusStr}})</span>
							</div>
						</div>
					</div>
				</div>

				<div v-if="discussList.length > 0"
					style="padding: 10px;background: #ECF4FE;border-radius: 10px;margin-top: 10px;">
					<div style="margin-right: 10px;font-size: 16px;font-weight: bold;margin-bottom: 10px;">评论</div>
					<div v-for="(item,index) in discussList" :key="index" class="u-border-bottom u-p-b-20 u-p-t-20">
						<div class="displayFlex u-m-b-10">
							<div style="margin-right: 10px;">{{item.userName}}</div>
							<div style="font-size: 10px;">{{item.createTime}}</div>
						</div>
						<div>{{item.content}}</div>
						<!-- <uploadImg v-if="item.fileIds" :defaultFileIDList="item.fileIds.split(',')" mode="prediv"></uploadImg> -->
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	let that
	export default {
		props: {

		},
		data() {
			return {
				params: {},
				detail: {},
				infoDet: {},
				approveDet: {},
				discussList: [],
				visible2: false,
			}
		},
		created: function() {},
		mounted: function() {
			that = this
		},
		methods: {

			gotoDet(item) {
				console.log(item)
				let routeUrl = ""
				switch (that.detail.scheduleType) {
					case "PRODUCE":
						routeUrl = "/produceManage/order?ticketId=" + that.params.ticketId
						break;
					case 'DANGER_WASTE':
						routeUrl = "/waste/wasteOrder?ticketId=" + that.params.ticketId
						break;
					case 'COMMON_WASTE':
						routeUrl = "/swEntWaste/order?ticketId=" + that.params.ticketId
						break;
					case 'BASE_DOCUMENT':
						routeUrl = "/filesManage/pdfDet?ticketId=" + that.params.ticketId + "&categoryMainId=" + that
							.detail
							.categoryMainId + "&itemId=" + that.detail.categoryItemId
						break;
					case 'WASTE_GAS':
						if (that.detail.contentCode == 'GAS_STANDING_BOOK') {
							routeUrl = "wasteGas/outletDetail?ticketId=" + that.params.ticketId
						} else if (that.detail.contentCode == 'GAS_INSPECT') {
							routeUrl = "wasteGas/GasStandingBook?ticketId=" + that.params.ticketId
						} else if (that.detail.contentCode == 'GAS_SELF_SURVEY') {
							routeUrl = "wasteGas/survey?ticketId=" + that.params.ticketId
						} else {
							routeUrl = "/filesManage/pdfDet?ticketId=" + that.params.ticketId + "&categoryMainId=" + that
								.detail
								.categoryMainId + "&itemId=" + that.detail.categoryItemId
						}
						break;
					case 'WASTE_WATER':
						if (that.detail.contentCode == 'WATER_STANDING_BOOK') {
							routeUrl = "wasteWater/outletDetail?ticketId=" + that.params.ticketId
						} else if (that.detail.contentCode == 'WATER_INSPECT') {
							routeUrl = "wasteWater/waterStandingBook?ticketId=" + that.params.ticketId
						} else if (that.detail.contentCode == '_WATER_SELF_SURVEY') {
							routeUrl = "wasteWater/survey?ticketId=" + that.params.ticketId
						} else {
							routeUrl = "/filesManage/pdfDet?ticketId=" + that.params.ticketId + "&categoryMainId=" + that
								.detail
								.categoryMainId + "&itemId=" + that.detail.categoryItemId
						}
						break;
				}
				that.$router.push(routeUrl)
			},

			async getData(item) {
				that.params.referId = item.id
				that.params.type = item.contentCode
				that.detail = {}
				that.infoDet = {}
				that.approveDet = {}
				that.discussList = []

				that.visible2 = true
				that.ajax({
					url: 'approvalNode/getApprovalInfoByReferId',
					data: that.params,
					contentType: 'application/x-www-form-urlencoded',
					success: async (result) => {
						if (result.data && result.data.info) {
							let thisResult = result.data
							that.approveDet = thisResult.nodeList
							that.infoDet = thisResult.info
							that.params.referId = thisResult.info.referId
							await that.getApprovalDiscussListByReferId()
						}
					}
				}, "加载中...");

				that.ajax({
					url: '/documentEntSchedule/getEntScheduleInfoById',
					data: {
						scheduleId: that.params.referId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: async (result) => {
						that.detail = result.data

						if (that.detail.status == "OVER_TIME") {
							that.detail.imageName = "icon-lianjiechaoshi"
							that.detail.color = "#dd524d"
						}
						if (that.detail.status == "WAIT_COMPLETE") {
							that.detail.imageName = "icon-dengdai1"
							that.detail.color = "#f0ad4e"
						}
						if (that.detail.status == "HAVE_COMPLETE") {
							that.detail.imageName = "icon-wancheng"
							that.detail.color = "#4cd964"
						}
						that.$forceUpdate()

					}
				}, "加载中...");

			},


			//获取评论列表
			async getApprovalDiscussListByReferId() {
				that.ajax({
					url: 'approvalDiscuss/getApprovalDiscussListByReferId',
					data: {
						referId: that.params.referId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: (thisResult) => {
						that.discussList = thisResult.data
					}
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>